<template>
    <div>
      <MHeader :back="true">列表页</MHeader>
      <div class="content">
        <ul>
          <router-link :to="{name:'detail',params:{bid:book.bookId}}" v-for="(book,key) in data" :key="key" tag="li">
            <img :src="book.bookCover"/>
            <div class="right">
              <h4>{{book.bookName}}</h4>
              <p>{{book.bookInfo}}</p>
              <b>{{book.bookPrice}}</b>
              <button @click.stop="remove(book.bookId)">删除</button>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
  import MHeader from '../base/MHeader'
  import {getBooks,removeBook} from '../api'

  export default {
    data() {
      return {data:[]}
    },
    created(){
      this.getData();
    },
    methods: {
      async getData(){
        // 给data起别名 对象中属性名字必须和得到的结果名字一致
        this.data = await getBooks();
      },
      async remove(id){
        // 给data起别名 对象中属性名字必须和得到的结果名字一致
        await removeBook(id);

        //删除前台数据
        this.data = this.data.filter(item => item.bookId !== id);
      },
    },
    computed: {},
    components: {MHeader}
  }
</script>

<style scoped >
  .content ul {
    padding: 10px;
  }
  .content ul li{
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .content ul li img{
    width: 130px;
    height: 150px;
  }
  .content h4{
    font-size: 20px;
    line-height: 25px;
  }
  .content p{
    color: #cccccc;
    line-height: 35px;
  }

  .content b{
    color: red;
  }
  .content button{
    display: block;
    width: 60px;
    height: 25px;
    background: orange;
    color: #fff;
    border: none;
    border-radius: 15px;
    outline: none;
  }
</style>
